<script setup lang="js">
import { ref, onMounted } from 'vue'

const countSync = ref(0)
const link = ref('https://github.com/guocaoyi/create-chrome-ext')

onMounted(() => {
  chrome.storage.sync.get(['count'], (result) => {
    countSync.value = result.count || 0
  })

  chrome.runtime.onMessage.addListener((request) => {
    if (request.type === 'COUNT') {
      countSync.value = request?.count ?? 0
    }
  })
})
</script>

<template>
  <main class="options-main">
    <div class="options-card">
      <img src="/src/assets/logo.png" alt="Logo" class="options-logo" />
      <h3 class="options-title">扩展设置</h3>
      <h4 class="options-count">Popup 计数：<span>{{ countSync }}</span></h4>
      <a :href="link" target="_blank" class="options-link">由 create-chrome-ext 生成</a>
    </div>
  </main>
</template>

<style>
:root {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
  color-scheme: light dark;
  background-color: #f4f6fb;
}

body {
  min-width: 20rem;
  background: #f4f6fb;
}

.options-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f6fb;
}

.options-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(60, 72, 88, 0.12);
  padding: 2.5rem 2rem 2rem 2rem;
  min-width: 320px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s;
}
.options-card:hover {
  box-shadow: 0 8px 32px 0 rgba(60, 72, 88, 0.18);
}

.options-logo {
  width: 56px;
  height: 56px;
  margin-bottom: 1.2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(60, 72, 88, 0.10);
}

.options-title {
  color: #42b983;
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0.5rem 0 1.2rem 0;
  letter-spacing: 1px;
}

.options-count {
  color: #333;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.options-count span {
  color: #42b983;
  font-weight: 600;
  font-size: 1.2rem;
}

.options-link {
  font-size: 0.95rem;
  color: #888;
  text-decoration: none;
  margin-top: 1.2rem;
  transition: color 0.2s;
  border-bottom: 1px dashed #42b983;
}
.options-link:hover {
  color: #42b983;
  border-bottom: 1px solid #42b983;
}

@media (max-width: 480px) {
  .options-card {
    padding: 1.2rem 0.5rem 1.2rem 0.5rem;
    min-width: unset;
  }
  .options-main {
    padding: 0.5rem;
  }
}
</style>
